<template>
  <div :id="id"></div>
</template>

<script>
    import * as echarts from 'echarts';
    var elementResizeDetectorMaker = require("element-resize-detector")
    export default {
        name: "index",
        props:{
            option:Object,
            id: {
                type: String,
                default: "chart"
            },
        },
        watch:{
            option:{
                deep:true,
                handler(val){
                    this.drawLine();
                }
            }
        },
        data(){
            return{
                myChart:null,
            }
        },
        mounted(){
            this.drawLine();
        },
        methods: {
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                this.myChart = echarts.init(document.getElementById(this.id))
                // 绘制图表
                this.myChart.setOption(this.option);
                elementResizeDetectorMaker().listenTo(document.getElementById(this.id), element => {
                    // 重置图表
                    this.myChart.resize()
                })



            }
        }
    }
</script>

<style scoped>
</style>
